<template>
  <div>
    <el-table
      :data="scores"
      stripe 
      style="margin: 20px auto;"
    >
      <el-table-column label="学生ID" prop="student_id"/>
      <el-table-column label="初试科目一成绩" prop="initial_score1"/>
      <el-table-column label="初试科目二成绩" prop="initial_score2"/>
      <el-table-column label="初试科目三成绩" prop="initial_score3"/>
      <el-table-column label="初试科目四成绩" prop="initial_score4"/>
      <el-table-column label="复试科目一成绩" prop="interview_subject1"/>
      <el-table-column label="复试科目二成绩" prop="interview_subject2"/>
      <el-table-column v-if="counter.role_id == 8" align="right" label="操作" width="200px">
        <template #default="scope">
          <el-button 
            size="small" 
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button 
            size="small" 
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


   <!-- 编辑任务页面 -->
		<el-dialog
			title="导入成绩"
			v-model="edit_dialog_visible"
			width="30%"
		>
			<el-form
				ref="editFormRef"
				:model="form"
				status-icon
				label-width="120px"
				class="demo-ruleForm"
			>
			<!-- <el-form-item label="学生ID" prop="student_id">
				<el-input v-model="form.student_id" autocomplete="off"/>
			</el-form-item> -->
			<el-form-item label="初始科目一成绩" prop="initial_socre1">
				<el-input v-model="form.initial_score1" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="初始科目二成绩" prop="initial_socre2">
				<el-input v-model="form.initial_score2" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="初始科目三成绩" prop="initial_socre3">
				<el-input v-model="form.initial_score3" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="初始科目四成绩" prop="initial_socre4">
				<el-input v-model="form.initial_score4" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="复试科目一成绩" prop="interview_subject1">
				<el-input v-model="form.interview_subject1" autocomplete="off"/>
			</el-form-item>
			<el-form-item label="复试科目二成绩" prop="interview_subject2">
				<el-input v-model="form.interview_subject2" autocomplete="off"/>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
				<el-button @click="resetForm(editFormRef)">重置</el-button>
			</el-form-item>
			</el-form>
		</el-dialog>
  </div>
</template>

<script setup>
import {RouterView,RouterLink} from 'vue-router'
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const scores = ref([]);
const getScores = () =>{
  const token = sessionStorage.getItem('token')
  axios.get("http://127.0.0.1:5000/scores", {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      // console.log(res);
      console.log(res.data)
      scores.value = res.data
  })
}

const getScore = () =>{
  const token = sessionStorage.getItem('token')
  axios.get(`http://127.0.0.1:5000/scores/${counter.user_id}`, {
      headers: {
          Authorization: `Bearer ${token}`
      }
  }).then(res => {
      // console.log(res);
      console.log(res.data)
      scores.value = res.data
  })
}


onMounted(() => {
	if(counter.role_id == 8) {
		getScores()
	}
	else {
		getScore()
	}
})

// 编辑表单
let edit_dialog_visible = ref(false)
const handleEdit = (index, row) => {
	for(let key in row) {
		form[key] = row[key]
	}
	edit_dialog_visible.value = true
}

// 添加表单
let add_dialog_visible = ref(false)


// 删除表单
const handleDelete = (index, row) => {
	console.log(row.id);
	const token = sessionStorage.getItem('token')
	axios.delete(`http://localhost:5000/jobs/${row.id}`, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then(() => {
		// getJobs()
	})
}

const editFormRef = ref()
const form = reactive({
	id: '',
	initial_score1: '',
	initial_score2: '',
	initial_score3: '',
	initial_score4: '',
	interview_subject1: '',
	interview_subject2: '',
	student_id: ''
})

const submitEditForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.put(`http://localhost:5000/scores/${form.id}`, form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then((res) => {
		formEl.resetFields()
		edit_dialog_visible.value = false
		if(counter.role_id == 8) {
		getScores()
		}
		else {
			getScore()
		}
	})
}

const submitForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.post('http://localhost:5000/jobs', form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then(() => {
		add_dialog_visible.value = false
		formEl.resetFields()
		// getJobs()
	})
}
// 重置表单
const resetForm = (formEl) => {
	formEl.resetFields()
}

</script>

<style scoped>

</style>
